<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglib.jsp" %>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="微社区,Q生活" name="keywords"/>
<meta content="微社区,Q生活" name="description"/>
<title>微社区|Q生活</title>

<link rel="stylesheet" href="${ctx }/static/css/Master.css"/>
<link rel="stylesheet" href="${ctx }/static/css/jquery-labelauty.css"/>
<link rel="stylesheet" href="${ctx}/static/plugins/JQuery zTree v3.5.15/css/zTreeStyle/zTreeStyle.css">

<script src="${ctx }/static/js/jquery-1.9.0.min.js"></script>
<script src="${ctx }/static/js/jquery-labelauty.js"></script>

<link href="${ctx}/static/css/validation.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="${ctx}/static/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/jquery.metadata.js"></script>
<script type="text/javascript" src="${ctx}/static/js/messages_cn.js"></script>

<script src="${ctx}/static/plugins/JQuery zTree v3.5.15/js/jquery.ztree.all-3.5.min.js"></script>
<script src="${ctx}/static/plugins/layer/layer.js"></script>
<%-- 基础js,所有页面都需要引入此js,依赖layer.js --%>
<script src="${ctx}/static/js/common/base.js"></script>
<script src="${ctx}/static/js/common/util.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		$('.labelautybox :input').labelauty();
		
		var setting = {
                check: {
                    enable: true ,
                    chkboxType: { "Y": "", "N": "" }
                },
                view: {
                    dblClickExpand: false
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    onCheck: onCheck
                }
            };
            
            //判断id是否包含在ids中
            function isIn(id,ids){
            	if(!ids){
            		return false;
            	}
            	var array = ids.split(",");
            	if(array.indexOf(id) > -1){
            		return true;
            	}else{
            		return false;
            	}
            	
            }

            var zNodes =[
                <c:forEach items="${resourceList}" var="r" >
                <%--<c:if test="${not (r.resLevel == 1)}">--%>
                { id:"${r.resId}", pId:"${r.resPId}", name:"${r.resName}${r.normal == 0?'【停用】':''}", checked:isIn("${r.resId}","${role.resourceIds}"), open:"${r.resLevel<=1?true:false}"},
                <%--</c:if>--%>
                </c:forEach>
            ];
			
            function onCheck(e, treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("tree"),
                        nodes = zTree.getCheckedNodes(true),
                        id = "",
                        name = "";
                //倒序
                nodes.sort(function compare(a,b){return b.id-a.id;});
                for (var i=0, l=nodes.length; i<l; i++) {
                    id += nodes[i].id + ",";
                    name += nodes[i].name.replace("【停用】","") + "，";
                }
                if (id.length > 0 ) id = id.substring(0, id.length-1);
                if (name.length > 0 ) name = name.substring(0, name.length-1);
                $("#resourceIds").val(id);
                $("#resourceNames").val(name);
//                hideMenu();
            }

            function showMenu() {
                var cityObj = $("#resourceNamesDiv");
                var cityOffset = $("#resourceNamesDiv").offset();
                $("#menuContent").css({left:cityOffset.left + cityObj.outerWidth() + "px", top:cityOffset.top + "px"}).slideDown("fast");

                $("body").bind("mousedown", onBodyDown);
            }
            function hideMenu() {
                $("#menuContent").fadeOut("fast");
                $("body").unbind("mousedown", onBodyDown);
            }
            function onBodyDown(event) {
                if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
                    hideMenu();
                }
            }

            $.fn.zTree.init($("#tree"), setting, zNodes);
            $("#menuBtn").click(showMenu);
            
            
            //异步验证角色名称是否重复
    	    jQuery.validator.addMethod("checkRoleNameExist", function(value, element){
    	        var result = false;
    	        var rolId = $("#rolId").val();
    	        if(!rolId){
    	        	rolId = 0;
    	        }
    	        // 设置同步
    	        $.ajaxSetup({
    	            async: false
    	        });
    	        $.get("${ctx}/role/"+rolId+"/"+value+"/checkRoleNameExist", function(data){
    	        	if(typeof data == "string"){
    	        		if(data == "true"){
    	        			data = true;
    	        		}else{
    	        			data = false;
    	        		}
    	        	}
    	            result = !data;
    	            
    	        });
    	        // 恢复异步
    	        $.ajaxSetup({
    	            async: true
    	        });
    	        return result;
    	    }, "角色名称已存在");
            
	});
	
	function submit(){
		var form = $("#editForm");
		if(!form.valid()){
			return false;
		}
		
		$.ajax({    
		    //url:form.attr("action"),//可以不要   
		    data:form.serialize(),    
		    type:"post",    
		    cache:false,    
		    dataType:"json",
		    async:true, //默认为true 异步    
		    success:function(data) {    
		        top.layer.msg(data,{},function(){
		        	window.location="${ctx}/role/list";   
	            });
		     }  
		});
	}
</script>
</head>

<body>
<section class="boxRight">
		<div class="OrgTit">${op }</div>
		<div class="context">
		<form:form id="editForm" method="post" commandName="role">
			<form:hidden path="rolId"/>
			<div class="add_firstmenu">
				<dl>
					<dt>
						<span class="im">*</span>角色名
					</dt>
					<dd>
						<form:input class="w1 required checkRoleNameExist" path="rolName" maxlength="15"/>
					</dd>
				</dl>
				<dl>
					<dt>备注</dt>
					<dd>
						<div class="textareaBox">
							<form:textarea path="rolDesc" maxlength="200" style="height: 50px;"/> 
						</div>
					</dd>
				</dl>
				<dl>
					<dt>资源列表</dt>
					<dd class="labelautybox labelautybox1">
						<div class="combtn">
			            <a id="menuBtn" href="javascript:void(0)">选择</a>
			            </div>
						<div id="resourceNamesDiv" class="textareaBox">
			            	<form:hidden path="resourceIds"/>
				            <textarea id="resourceNames" readonly="readonly"><c:forEach items="${role.resourceList}" var="resource" varStatus="status">${resource.resName }${status.last?"":"，"}</c:forEach></textarea>
						</div>
					</dd>
				</dl>
				<div class="combtn"><a href="javascript:void(0);" onclick="submit()">确定</a><a href="javascript:void(0);" onclick="history.back();">返回</a></div>
			</div>
		</form:form>
		</div>
	
</section>

<%--树 --%>
<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
    <ul id="tree" class="ztree" ></ul>
</div>

</body>
</html>
